<template>
  <!-- 时间显示容器 -->
  <div class="time-display">
    <!-- 国际化显示的"北京时间"文字 -->
    <span class="title">{{ $t('home.beijingTime') }}</span>
    <!-- 格式化后的时间显示 -->
    <span>{{ formattedTime }}</span>
  </div>
</template>

<script>
export default {
  name: "BeijingTime",
  data() {
    return {
      currentTime: new Date(), // 存储当前时间对象
      timer: null // 用于存储定时器
    };
  },
  computed: {
    /**
     * 格式化时间计算属性
     * 返回格式示例：06/20/2025 09:55:32 AM
     */
    formattedTime() {
      const dt = new Date(this.currentTime);
      const year = dt.getFullYear();
      const month = (dt.getMonth() + 1).toString().padStart(2, '0');
      const day = dt.getDate().toString().padStart(2, '0');
      const hour = (dt.getHours() % 12 || 12).toString().padStart(2, '0');
      const minute = dt.getMinutes().toString().padStart(2, '0');
      const second = dt.getSeconds().toString().padStart(2, '0');
      const ampm = dt.getHours() >= 12 ? 'PM' : 'AM';

      return `${year}/${month}/${day} ${hour}:${minute}:${second} ${ampm}`;
    }
  },
  mounted() {
    // 组件挂载时启动定时器，每秒更新一次时间
    this.timer = setInterval(() => {
      this.currentTime = new Date();
    }, 1000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器，避免内存泄漏
    clearInterval(this.timer);
  }
}
</script>

<style scoped lang="scss">
.time-display {
  color: #333;
  font-size: 14px;
  padding: 18 auto;
  // background-color: red;
  font-weight: 400;

  height: 50px;
  line-height: 50px;
  display: inline-flex; // 使用flex布局实现垂直居中

  .title {
    margin-right: 4px;
    color: #333;
  }
}
</style>
